<style lang="less" scoped>
	.userList {
		background: #ffffff;
		.listd {
			display: flex;
			padding:15px 20px;
			box-sizing: border-box;
			border-bottom: 1rpx solid rgba(248, 249, 253, 1);
			.left {
				flex: 2;
				.face{
					width: 56px;
					height: 56px;
					border-radius: 50%;
				}
			}
			.right{
				flex: 6;
				.name{
					font-family: PingFangSC-Medium;
					font-size: 15px;
					color: #333333;
					letter-spacing: 0;
					line-height: 15px;
				}
				.componey{
					font-family: PingFangSC-Regular;
					font-size: 13px;
					color: #AEAEAE;
					letter-spacing: 0;
					line-height: 14px;
					margin-top: 8px;
					display:-webkit-box;
					-webkit-line-clamp:1;
					-webkit-box-orient:vertical;
					overflow:hidden;
				}
				.address{
					font-family: PingFangSC-Regular;
					font-size: 13px;
					color: #AEAEAE;
					letter-spacing: 0;
					line-height: 14px;
					margin-top: 6px;
					display:-webkit-box;
					-webkit-line-clamp:1;
					-webkit-box-orient:vertical;
					overflow:hidden;
					.text-green {
						margin: 0 6rpx;
					}
				}
			}
			.last{
				flex: 1;
				padding-top: 43rpx;
				box-sizing: border-box;
				text-align: center;
				margin: 0 auto;
				justify-items: center;
				.icon {
					width: 17px;
					height: 17px;
				}
				.rTab {
					text-align: center;
					margin: 0 auto;
					.icon{
						display: block;
						margin: 8rpx auto;
						text-align: center;
					}
					.lang {
						display: block;
						font-family: PingFangSC-Regular;
						font-size: 10px;
						color: #CACACA;
						letter-spacing: 0;
						line-height: 10px;
					}
				}
				.hot {}
			}
		}
	}
</style>
<template>
	<div class="userList">
		<div class="listd animated" v-for="(x, index) in list" :key="index" @tap="goCard(x)" :class="[animate]">
			<div class="left">
				<img :src="x.card_header" class="face shadow-warp">
			</div>
			<div class="right">
				<div class="name">{{x.card_name}}</div>
				<div class="componey">
					{{ x.card_company }}
					<span v-if="x.card_company">~</span>
					{{x.card_position || '职位信息保密'}} </div>
				<div class="address" v-if="tabId === 2">更新于{{x.card_update_str}}</div>
				<div class="address" v-else-if="tabId === 3"> 名片被<span class="text-green"> {{x.count}} </span> 人收纳 </div>
				<div class="address" v-else>{{x.card_address || '地址信息保密~'}}</div>
			</div>
			<div class="last">
				<div class="rTab" v-if="tabId === 0">
					<img src="http://img10.he29.com/static/mtu4nd/6a990ad2387771d2.png" class="icon">
				</div>
				<div class="rTab" v-else-if="tabId === 1">
					<img src="http://img10.he29.com/static/mtu4nt/e4eb1cb7b075b7b9.png" class="icon">
					<span class="lang"> {{x.card_julis}} </span>
				</div>
				<div class="rTab" v-else-if="tabId === 2">
					<img src="http://img.he29.com/api/png/18d031baa0057f837fbfb5e0dfe91001.png" class="icon">
				</div>
				<div class="rTab" v-else-if="tabId === 3">
					<img src="http://img.he29.com/api/png/dbd6adadd5a82520d99bf7e1c02fde18.png" class="icon">
				</div>
				<div class="rTab hot" v-else-if="tabId === 4">
					<img src="http://img.he29.com/api/png/179c7ec2a2ecf9d0501b3780d80eb39b.png" class="icon">
				</div>
				<div class="rTab" v-else>
					<img src="http://img10.he29.com/static/mtu4nd/6a990ad2387771d2.png" class="icon">
				</div>
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/3/22
	 * Time: 12:38
	 * Description:
	 */
	export default {
		name: 'ulist',
		props:{
			list: {
				type: Array,
				default () {
					return []
				}
			},
			tabId: {
				type: Number,
				default : 0
			},
			animate: {
				type: String,
				default : `fadeInUp`
			}
		},
		data() {
			return {}
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			goCard (x) {
				this.$wxapi.goNext(`card/index?id=${x.card_id}`)
			}
		},
		created() {},
		mounted() {}
	}
</script>
